<template>
  <div :class="empty?'':'section-contianer'" :style="styleProp">
    <div v-if="showHeader && !empty" :style="isHeaderTitleCenter?'justify-content: center':''" class="section-header">
      <div v-if="title && showTag" class="tag-wrp">
        <div class="tag"></div>
        <div class="tag-right"></div>
      </div>
      <div v-if="title" :style="titleStyle ? titleStyle: ''" class="section-header-title">{{ title }}</div>
      <slot name="header"></slot>
    </div>
    <div :class="hasFooter? (showHeader ? 'section-content':'section-content-noheader'): (showHeader && !empty? 'section-content-nofooter': 'empty-content')">
      <slot name="content"></slot>
    </div>
    <div v-if="hasFooter && !empty" class="section-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 标题
    title: {
      type: String
    },
    // 展示标题左边的小图标
    showTag: {
      type: Boolean,
      default: true
    },
    // 是否有底部
    hasFooter: {
      type: Boolean,
      default: false
    },
    // 整体样式控制
    styleProp: {
      type: String
    },
    // 是否展示顶部
    showHeader: {
      type: Boolean,
      default: true
    },
    // 顶部文字居中
    isHeaderTitleCenter: {
      type: Boolean,
      default: false
    },
    // 标题样式
    titleStyle: {
      type: String,
      default: ''
    },
    // 是否展示一个空盒子，没有边框背景等
    empty: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/public.scss';

.section-contianer {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin: 10px;
  position: relative;
  display: inline-block;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;

  .section-footer {
    position: absolute;
    height: 50px;
    padding: 0 15px;
    width: 100%;
    flex: 1;
    bottom: 0;
    border-top: 1px solid $sepline-color;
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: space-between;
    z-index: 2;
  }

  .section-header {
    position: absolute;
    height: 50px;
    padding: 0 15px;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0;
    border-bottom: 1px solid $sepline-color;

    .tag-wrp {
      position: absolute;
      top: 25px;
      left: 0;
      transform: translateY(-50%);
      display: flex;
      align-items: center;

      .tag {
        width: 2px;
        height: 14px;
        background-color: $color_default;
        border-radius: 4px;
      }

      .tag-right {
        width: 1px;
        height: 14px;
        background-color: $color_default;
        margin-left: 1px;
      }
    }

    &-title {
      font-size: $font_size_small_large;
      color: $color_black;
      font-weight: bold;
    }
  }

  .section-content {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    margin-top: 50px;

    &-nofooter {
      margin-top: 50px;
      height: calc(100% - 50px);
    }

    &-noheader {
      height: calc(100% - 50px);
    }
  }
}

.empty-content {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>
